<template>
  <div>
    <Form :model="formData" @submit.native.prevent="save" :label-width="80">
      <FormItem label="节点">
        <!-- <Input v-model="formData.name" /> -->
        <i-select v-model="controller" style="width:200px">
          <i-option v-for="(item, index) in controllerSelect" :value="item" :key="index">{{ item }}</i-option>
        </i-select>
        <i-select
          v-model="action"
          style="width:200px"
          v-if="controller != ''"
          @on-change="actionChange"
        >
          <i-option
            v-for="(item, index) in actionSelect[controller]"
            :value="item"
            :key="index"
          >{{ item }}</i-option>
        </i-select>
      </FormItem>
      <FormItem label="标题">
        <Input v-model="formData.title" />
      </FormItem>
      <FormItem label="父级ID">
        <!-- <Input v-model="formData.pid" type="number" /> -->
        <Cascader :data="parentSelect" change-on-select @on-change="handleSuccess"></Cascader>
      </FormItem>

      <FormItem>
        <Button type="primary" html-type="submit" :loading="formLoading">保存</Button>
      </FormItem>
    </Form>
  </div>
</template>
<script>
import addPage from "../../mixins/addPage";
export default {
  data() {
    return {
      parentSelect: [],
      controllerSelect: [],
      actionSelect: [],
      nowActionSelect: [],
      controller: "",
      action: "",
      formData: {
        name: "",
        title: "",
        pid: "",
      },
      formLoading: false,
      addUrl: "/admin/auth_rule/add",
      allControllerUrl: "/admin/auth_rule/initperm",
      parentUrl: "/admin/auth_rule/getParent",
    };
  },
  created() {
    this.getController();
    this.getParent();
  },
  methods: {
    handleSuccess(value, selectedData) {
      if (value.length > 2) {
        this.$Message.error("只能创建最多三级分类");
        return;
      } else {
        this.formData.pid = value.slice(-1)[0];
      }
    },
    actionChange() {
      this.formData.name = `${this.controller}/${this.action}`;
      console.log(this.formData);
    },
    getParent() {
      this.$axios.get(this.parentUrl).then((res) => {
        if (res.code == 1) {
          this.parentSelect = res.data;
        } else if (res.code == -1) {
          this.$Message.error(res.msg);
        }
      });
    },
    getController() {
      this.$axios.get(this.allControllerUrl).then((response) => {
        if (response.code == 1) {
          this.controllerSelect = response.data.controller;
          this.actionSelect = response.data.action;
          console.log(this.controllerSelect);
        } else if (response.code == -1) {
          this.$Message.error(response.msg);
        }
      });
    },
  },
  mixins: [addPage],
};
</script>
